<template>
  <div class="channel-container">
    <div class="tip">Hi，我是您的专属AI助手~</div>
    <div class="content">
      <div class="list">
        <div class="item">
          <div class="icon">
            <img src="https://img.js.design/assets/img/66542b4ab6575a3ddd54a666.png#75139f52c75184c90ae9d8a36f126099" alt="" />
          </div>
          <div class="detail">
            <div class="title">
              <span class="no-wrap-multi-1">学术会议探讨频道</span>
              <p class="no-wrap-multi-2">与各渠道建立合作关系提高销售额相关内容资料，与各渠道建立合作。</p>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="icon">
            <img src="https://img.js.design/assets/img/66542b4ab6575a3ddd54a666.png#75139f52c75184c90ae9d8a36f126099" alt="" />
          </div>
          <div class="detail">
            <div class="title">
              <span class="no-wrap-multi-1">学术会议探讨频道</span>
              <p class="no-wrap-multi-2">与各渠道建立合作关系提高销售额相关内容资料，与各渠道建立合作。</p>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="icon">
            <img src="https://img.js.design/assets/img/66542b4ab6575a3ddd54a666.png#75139f52c75184c90ae9d8a36f126099" alt="" />
          </div>
          <div class="detail">
            <div class="title">
              <span class="no-wrap-multi-1">学术会议探讨频道</span>
              <p class="no-wrap-multi-2">与各渠道建立合作关系提高销售额相关内容资料，与各渠道建立合作。</p>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="icon">
            <img src="https://img.js.design/assets/img/66542b4ab6575a3ddd54a666.png#75139f52c75184c90ae9d8a36f126099" alt="" />
          </div>
          <div class="detail">
            <div class="title">
              <span class="no-wrap-multi-1">学术会议探讨频道</span>
              <p class="no-wrap-multi-2">与各渠道建立合作关系提高销售额相关内容资料，与各渠道建立合作。</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ComponentInternalInstance, getCurrentInstance, inject, onMounted, reactive } from "vue";
// 获取当前主题
const themeColor: any = inject("themeColor");
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
interface IState {
  active: number;
  tabList: Array<any>;
}
const state: IState = reactive({
  active: 1,
  tabList: [
    {
      title: "助手",
      conComponentName: "assistant",
    },
    {
      title: "角色",
      conComponentName: "role",
    },
    {
      title: "频道",
      conComponentName: "channel",
    },
  ],
});
// 接口Api调用 --- todo
// proxy?.$api.get("/api/api/core/trs/detail").then((res: any) => {
//   console.log(res);
// });
onMounted(() => {
  proxy?.$utils.setCheckDomColor(".main-container", "background", themeColor.fillColorLighten);
});
</script>
<style lang="scss" scoped>
.channel-container {
  width: 100%;
  padding: 20px 0;
  .tip {
    display: block;
    font-size: 28px;
    color: v-bind("themeColor.textColorLightest");
    margin: 20px 0;
    font-weight: 500;
  }
  .content {
    margin-top: 45.36px;
    .list {
      display: grid;
      grid-template-columns: repeat(1, 100%);
      grid-row-gap: 19px;
      grid-column-gap: 19px;
      .item {
        border-radius: 24px;
        background: v-bind("themeColor.fillColorLightest");
        padding: 22px;
        display: flex;
        align-items: center;
        gap: 18px;
        .icon {
          width: 170px;
          border-radius: 12px;
          overflow: hidden;
          height: 170px;
          img {
            width: 100%;
            object-fit: cover;
            height: 100%;
          }
        }
        .detail {
          width: calc(100% - 190px);
          span {
            font-size: 32px;
            font-weight: 700;
            letter-spacing: 0px;
            line-height: 44.8px;
            color: v-bind("themeColor.textColor");
            text-align: left;
            vertical-align: top;
            display: block;
          }
          p {
            margin-top: 6px;
            font-size: 20px;
            font-weight: 500;
            letter-spacing: 0px;
            line-height: 28px;
            color: v-bind("themeColor.textColorLighten");
            text-align: left;
            vertical-align: top;
          }
        }
      }
    }
  }
}
</style>
